<template>
  <view class="upload-avatar">
    <view class="avatar-title">
      <view class="mr-10">请选择或上传头像</view>
    </view>
    <!-- <img :src="imgHeader" style="width:202px;height:219px"> -->
    <view class="avatar-header">
      <view class="item" v-for="(avatar, index) in avatarList[gender - 1]" :key="avatar + index" :class="current === avatar ? 'current' : ''" @click="changeCurrentAvatar(avatar, index)">
        <!-- :style="{backgroundColor: gender == 1 ? '#525FA2' : '#EE751E'}" -->
        <view class="img-bord">
          <img :src="$imgUrl + avatar" class="img" alt="" >
        </view>
      </view>
      <view class="dft" @click="changeDefaultAvatar">
        <canvas canvas-id="firstCanvas" id="canvasImg"></canvas>
        <img :src="$imgUrl + defaultAvatar" class="img" alt="">
        <view class="icon"></view>
      </view>
    </view>
    <view class="avatar-title">
      <view class="mr-10">取个昵称吧</view>
    </view>
    <view class="nickname">
      <input type="text" :value="nickName" :placeholder="nickNameDefault" @change="changeNickname" />
      <view @click="getAvatar()" class="icon-box">
        <uni-icons type="refreshempty" size="18" color="#999999"></uni-icons>
      </view>
    </view>
    <view class="avatar-title">
      <view class="mr-10">性别</view>
    </view>
    <view class="gender">
      <view class="it" @click="changeGender(1)">
        <img src="https://img.qumoyugo.com/webimgbg/pets-user-male.png" :style="{ opacity: gender === 1 ? 1: 0.6}" alt="" class="img">
        <view class="name" :style="{background: gender === 1 ? '#94BCFF' : '#eeeeee', color: gender === 1 ? '#fff' : '#999' }">男生</view>
      </view>
      <view class="it" @click="changeGender(2)">
        <img src="https://img.qumoyugo.com/webimgbg/pets-user-female.png" :style="{ opacity: gender === 2 ? 1: 0.6}" alt="" class="img">
        <view class="name" :style="{background: gender === 2 ? '#FF897B' : '#eeeeee', color: gender === 2 ? '#fff' : '#999' }">女生</view>
      </view>
    </view>
    <view class="avatar-title">
      <view style="margin: 50rpx 0 24rpx 0">常住小区</view>
    </view>
    <button type="default" @click="handlerUserInfo" class="btn-submit">
      完成
    </button>
    <!-- <button type="default" open-type="chooseAvatar" @chooseavatar="chooseavatar" class="btn-submit">
      头像
    </button> -->
  </view>
</template>

<script setup>
import { ref, getCurrentInstance, onUnmounted } from 'vue'
import { storage } from '@/utils/utils'
import { SAVE_DEFAULT_AVATAR } from '@/assets/js/config'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { creatMapHeader } from '@/minxin/minxins'
// import { ossConfig } from '@/utils/alioss.js'
const { $https, $imgUrl } = getCurrentInstance().appContext.config.globalProperties
// ['/webimgbg/pico-map-header-cat.png', '/webimgbg/pico-map-header-dog.png', '/webimgbg/pico-map-header-other.png']
const avatarList = ref([
  ['/webimgbg/pico-map-header-1-1.png', '/webimgbg/pico-map-header-0-1.png', '/webimgbg/pico-map-header-2-1.png'],
  ['/webimgbg/pico-map-header-1-2.png', '/webimgbg/pico-map-header-0-2.png', '/webimgbg/pico-map-header-2-2.png']
])
// minxins混入
const { drawHeader } = creatMapHeader()
const defaultAvatar = ref('')
const nickName = ref('')
const nickNameDefault = ref('')
const current = ref('')
const gender = ref(1)
const redirect = ref('')
const currentIndex = ref(null) // 默认选中的头像索引
const permanentAaddress = ref({}) // 小区信息
onLoad((options) => {
  redirect.value = decodeURIComponent(options.redirect)
})
onShow(() => {
  const Avatar = storage.get(SAVE_DEFAULT_AVATAR)
  if (Avatar) {
    defaultAvatar.value = Avatar
    // drawHeader(gender.value, defaultAvatar.value)
  }
})
onUnmounted(() => {
  storage.remove(SAVE_DEFAULT_AVATAR)
})
const getAvatar = () => {
  $https({
    url: '/attr/default',
    type: ''
  }).then(res => {
    if (res.code === 0) {
      nickName.value = ''
      nickNameDefault.value = res.data.nickname
    }
  })
}
getAvatar()
// const chooseavatar = (e) => {
//   ossConfig(e.detail.avatarUrl).then(res => {
//     drawHeader(gender.value, res.substr(24), (mapHeader) => {
//       console.log(333333, mapHeader)
//     })
//   })
// }
const handlerUserInfo = () => {
  if (!(current.value || defaultAvatar.value)) {
    uni.showToast({
      title: '请选择或上传头像',
      icon: 'none'
    })
    return false
  }
  uni.showLoading({
    title: '头像生成中...'
  })
  drawHeader(gender.value, defaultAvatar.value, (mapHeader) => {
    console.log(mapHeader)
    if (mapHeader) {
      uni.hideLoading()
    }
    $https({
      url: '/profile',
      type: '',
      method: 'PUT',
      data: {
        face: current.value || defaultAvatar.value,
        nickname: nickName.value || nickNameDefault.value,
        sex: gender.value,
        mapHeader,
        permanentAddress: permanentAaddress.value
      }
    }).then(res => {
      if (res.code === 0) {
        uni.redirectTo({
          url: redirect.value,
          fail: () => {
            uni.switchTab({
              url: '/pages/index'
            })
          }
        })
      } else {
        uni.showToast({
          title: '更新失败',
          icon: 'none'
        })
      }
    })
  })
}
const changeNickname = (e) => {
  nickName.value = e.detail.value
}
const changeCurrentAvatar = (avatar, index) => {
  storage.remove(SAVE_DEFAULT_AVATAR)
  current.value = avatar
  defaultAvatar.value = avatar
  currentIndex.value = index
  // drawHeader(gender.value, defaultAvatar.value)
}
const changeDefaultAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album'],
    success: (res) => {
      current.value = ''
      uni.navigateTo({
        url: '/user/cropper?path=' + res.tempFilePaths[0] + '&orgin=first'
      })
    }
  })
}
// change性别
const changeGender = (type) => {
  gender.value = type
  defaultAvatar.value = avatarList.value[type - 1][currentIndex.value]
  current.value = avatarList.value[type - 1][currentIndex.value]
  // drawHeader(gender.value, defaultAvatar.value)
}
</script>

<style scoped lang="scss">
.upload-avatar{
  padding: 40rpx 80rpx;
  width: 100vw;
  overflow: hidden;
}
.avatar-title{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34rpx;
  font-weight: bold;
  color: #333333;
  line-height: 50rpx;
}
.avatar-header{
  position: relative;
  height: 380rpx;
  margin: 50rpx 0;
  .item{
    position: absolute;
    width: 72px;
    height: 72px;
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 6px;
    &.current{
      border-color: #979797;
    }
    .img-bord{
      width: 58px;
      height: 58px;
      border-radius: 50%;
    }
    .img{
      width: 58px;
      height: 58px;
      border-radius: 50%;
    }
    &:nth-child(1){
      top: 0;
      left: 224rpx
    }
    &:nth-child(2){
      top: 148rpx;
      left: 0;
    }
    &:nth-child(3){
      top: 148rpx;
      right: 0;
    }
    // &:nth-child(4){
    //   top: 340rpx;
    //   left: 57rpx;
    // }
    // &:nth-child(5){
    //   top: 340rpx;
    //   right: 57rpx;
    // }
  }
  .dft{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -10%);
    width: 138rpx;
    height: 138rpx;
    .img{
      width: 138rpx;
      height: 138rpx;
      border-radius: 50%;
    }
    .icon{
      position: absolute;
      background: url('https://img.qumoyugo.com/webimgbg/pets-photo-icon-ard.png') no-repeat;
      width: 42rpx;
      height: 42rpx;
      background-size: 100%;
      bottom: -10rpx;
      right: 10rpx;
      z-index: 100;
    }
    &::after{
      position: absolute;
      background: rgba(0,0,0,0.3);
      content: '上传头像';
      width: 138rpx;
      height: 138rpx;
      left: 0;
      top: 0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 24rpx;
    }
  }
}
.nickname{
  width: 470rpx;
  height: 88rpx;
  background: #F5F5F5;
  border-radius: 44rpx;
  margin: 40rpx auto;
  padding-left: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .icon-box{
    height: 88rpx;
    width: 68rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.gender{
  width: 458rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  .it{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 120rpx;
  }
  .img{
    width: 108rpx;
    height: 108rpx;
    align-self: center;
    opacity: 0.6;
  }
  .name{
    margin-top: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 34rpx;
    font-size: 28rpx;
    font-weight: 400;
    height: 48rpx;
  }
}
.btn-submit{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 84rpx;
  border-radius: 42rpx;
  background: #000000;
  color: #ffffff;
  margin-top: 80rpx;
  font-size: 32rpx;
  &:active{
    opacity: 0.8;
  }
}
.mr-10{
  margin-right: 10rpx;
}
.cropper_popup {
  width: 100vw;
  height: 100vh;
  position: relative;
  .btns {
    width: 100%;
    padding: 0 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 80rpx;
    z-index: 999999;
    color: #fff;
    font-size: 28rpx;
  }
  .sure{
    width: 120rpx;
    height: 56rpx;
    background: #E02020;
    border-radius: 28rpx;
  }
}
#canvasImg {
  visibility: hidden;
  position: absolute;
  left: -200vw;
  width: 203px;
  height: 239px;
}
.perm-addr{
  display: flex;
  align-items: center;
  .icon{
    width: 54rpx;
    height: 54rpx;
    margin-right: 20rpx;
  }
  .arres{
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    color: #333;
    border-radius: 35rpx;
    background-color: #F5F5F5;
    padding: 14rpx 20rpx;
    height: 80rpx;
    line-height: 28rpx;
  }
}
</style>
